<template>
  <div class="bottomRight">
    <DecTitle text="原片预警" />
    <div class="scroll">
      <vueSeamlessScroll
        :data="listData"
        class="warp"
        :class-option="classOption"
      >
        <ul class="item">
          <li v-for="(item, index) in listData" :key="index">
            <div class="box">
              <div class="index" style="color: #0092cc">
                {{ index + 1 }}
              </div>
              <div class="content">
                <div class="bottomRight-title">
                  <div class="bottomRight-name">
                    仓库名称:<span>{{ item.name }}</span>
                  </div>
                  <div class="date">原片名称:{{ item.date }}</div>
                </div>
                <div class="bottomRight-title">
                  <div class="glassrule">原片规格:{{ item.message }}</div>
                  <div class="glasNumber">阙值比:{{ item.Number }}/{{item.minStore}}</div>
                </div>
              </div>
              <div class="end" :style="{ color: colorArr[item.Number>item.minStore ? 1 : 0] }">
                {{ item.Number>item.minStore ? 1 : 0 | formateStatus }}
              </div>
            </div>
          </li>
        </ul>
      </vueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import { BaseData } from "./index";
import DecTitle from "@/components/decTitle";
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    DecTitle,
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: BaseData(),
      classOption: {
        direction: 1,
        singleHeight: 70,
        waitTime: 3000,
        step: 2,
      },
      colorArr: ["red", "#04a3eb"],
    };
  },
  methods: {},
  created() {},
  mounted() {},
  filters: {
    formateStatus(value) {
      let arr = ["原片不足", "充足"];
      return arr[value];
    },
  },
};
</script>
<style lang="scss" scoped>
.bottomRight {
  width: 100%;
  height: 100%;
}
.warp {
  width: 500px;
  height: 280px;
  margin: 0 auto;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li,
    a {
      display: block;
      height: 70px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      border-bottom: 2px dashed #00afed;

      .box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        .index {
          width: 10%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .content {
          padding-top: 10px;
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: space-around;
          flex-direction: column;

          .bottomRight-title {
            display: flex;
            font-size: 14px;

            .bottomRight-name {
              width: 60%;
              height: 100%;
              font-size: 16px;
            
              span {
                font-size: 16px;
                color: #bf8733;
                font-weight: bold;
                letter-spacing: 1px;
                padding-left: 7px;
              }
            }

            .date {
              flex: 1;
              display: flex;
            //   flex-direction: row-reverse;
              font-size: 16px;
            }
            .glassrule {
              width: 60%;
              height: 100%;
              font-size: 16px;
            }
            .glasNumber {
              flex: 1;
              height: 100%;
              font-size: 16px;
            }
          }

          .address {
            font-size: 16px;
          }
        }

        .end {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.scroll {
  width: 100%;
  height: 280px;
  overflow: hidden;
  transform: translateY(-10px);
}
</style>